<template>
  <div>
    <el-menu class="navbar" mode="horizontal">
      <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
      <breadcrumb class="breadcrumb-container hidden-xs-only"></breadcrumb>
      <el-col :span="12" class="hidden-sm-and-up">{{routeTitle}}</el-col>
      <div class="right-menu">
        <error-log class="errLog-container right-menu-item"></error-log>
        <el-dropdown class="avatar-container right-menu-item" trigger="click">
          <div class="avatar-wrapper">
            <span class="pan-btn light-blue-btn">{{user.username}}</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/">
              <el-dropdown-item>
                首页
              </el-dropdown-item>
            </router-link>
            <el-dropdown-item divided>
              <span @click="bindUpdatePassword" style="display:block;">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <span @click="logout" style="display:block;">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-tooltip effect="dark" content="全屏" placement="bottom" class="hidden-xs-only">
          <screenfull class="screenfull right-menu-item"></screenfull>
        </el-tooltip>
      </div>

    </el-menu>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="旧密码" prop="password">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import Breadcrumb from '@/components/Breadcrumb'
  import Hamburger from '@/components/Hamburger'
  import ErrorLog from '@/components/ErrorLog'
  import Screenfull from '@/components/Screenfull'
  import { get } from '@/api/sys/connSysOpenApi'
  import 'element-ui/lib/theme-chalk/display.css'
  import { updatePwd } from '@/api/sys/user'

  export default {
    components: {
      Breadcrumb,
      Hamburger,
      ErrorLog,
      Screenfull
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'user'
      ])
    },
    data() {
      const validatePassword = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请填写密码'))
        } else if (value.length < 6) {
          callback(new Error('密码不能小于' + '6' + '位'))
        } else if (value.length > 32) {
          callback(new Error('密码不能大于' + '32' + '位'))
        } else {
          callback()
        }
        // else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value)) {
        //     callback(new Error('密码必须包含字母和数字'))
        //   }
      }
      return {
        routeTitle: '',
        dialogFormVisible: false,
        form: {
          password: undefined,
          newPassword: undefined
        },
        rules: {
          newPassword: [{ validator: validatePassword }],
          password: [{ validator: validatePassword }]
        }
      }
    },
    created() {
      this.getSite()
      if (this.$route.meta) {
        console.log(this.$route.meta)
        this.routeTitle = this.$route.meta.title
      }
    },
    methods: {
      getSite() {
        get('site').then(res => {
          this.site = res.site
          this.$store.dispatch('site', res.site).then((res) => {
            document.title = res.name + '-' + res.version
          })
        })
      },
      toggleSideBar() {
        this.$store.dispatch('toggleSideBar')
      },
      logout() {
        this.$store.dispatch('LogOut').then(() => {
          location.reload()// In order to re-instantiate the vue-router object to avoid bugs
        })
      },
      bindUpdatePassword() {
        this.dialogFormVisible = true
      },
      updatePassword() {
        this.$refs.form.validate(valid => {
          if (valid) {
            updatePwd(this.form).then(() => {
              this.form = {
                password: undefined,
                newPassword: undefined
              }
              this.dialogFormVisible = false
            })
          } else {
            return false
          }
        })
      }
    },
    watch: {
      $route(to, from) {
        if (this.$route.meta) {
          this.routeTitle = this.$route.meta.title
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .navbar {
    height: 50px;
    line-height: 48px;
    border-radius: 0px !important;

    .hamburger-container {
      line-height: 58px;
      height: 50px;
      float: left;
      padding: 0 10px;
    }

    .breadcrumb-container {
      float: left;
    }

    .errLog-container {
      display: inline-block;
      vertical-align: top;
    }

    .right-menu {
      float: right;
      height: 100%;

      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        margin: 0 8px;
      }

      .screenfull {
        height: 20px;
      }

      .international {
        vertical-align: top;
      }

      .theme-switch {
        vertical-align: 15px;
      }

      .avatar-container {
        .avatar-wrapper {
          cursor: pointer;
          position: relative;

          .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }

          .el-icon-caret-bottom {
            position: absolute;
            right: -20px;
            top: 25px;
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
